/*
 * @Author: kanglang
 * @Date: 2021-02-23 11:22:57
 * @LastEditors: kanglang
 * @LastEditTime: 2021-04-08 11:58:29
 * @Description: 企业认证信息中 期限item
 */

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { px2dp, priceColor, fontColorDeepGray, fontColorBlack } from '@/styles';
import { Check } from '@/common';
import StartEndDateItem from './start-end-date-item';

const BusinessDateItem = ({
  label,
  value,
  onSwitchLongTime,
  onSwitchSelectDate,
  selectDateChecked,
  longTimeChecked,
  onStartDate,
  onEndDate,
  startTip,
  endTip,
  disabled = false
}) => {
  const onSwitchDate = () => {
    onSwitchLongTime && onSwitchLongTime();
  };
  const onSelctDate = () => {
    onSwitchSelectDate && onSwitchSelectDate();
  };
  const selectStartDate = () => {
    onStartDate && onStartDate();
  };
  const selectEndDate = () => {
    onEndDate && onEndDate();
  };
  const formItem = (name) => {
    return (
      <>
        <Text style={{ color: priceColor }}>＊</Text>
        <Text style={{ color: fontColorDeepGray, fontSize: px2dp(28) }}>{name}</Text>
      </>
    );
  };
  return (
    <>
      <View style={[styles.itemBox, { justifyContent: 'space-between' }]}>
        <View style={{ flexDirection: 'row' }}>
          <View style={styles.labelBox}>{formItem(label)}</View>
          <View style={styles.longTimeBox}>
            <Check
              checked={selectDateChecked}
              onCheck={!disabled ? onSelctDate : () => { }}
            />
            <Text style={[styles.longTime, selectDateChecked && { color: fontColorBlack, fontSize: px2dp(28) }]}>{value || '选择日期'}</Text>
          </View>
        </View>
        <View style={styles.longTimeBox}>
          <Check
            checked={longTimeChecked}
            onCheck={!disabled ? onSwitchDate : () => { }}
          />
          <Text style={[styles.longTime, longTimeChecked && { color: fontColorBlack, fontSize: px2dp(28) }]}>长期</Text>
        </View>
      </View>
      {
        (selectDateChecked || longTimeChecked) &&
        <StartEndDateItem
          longTimeChecked={longTimeChecked}
          onStart={!disabled ? selectStartDate : () => { }}
          onEnd={!disabled ? selectEndDate : () => { }}
          startTip={startTip}
          endTip={endTip}
        />
      }
    </>
  );
};

export default BusinessDateItem;

const styles = StyleSheet.create({
  itemBox: {
    flexDirection: 'row',
    alignItems: 'center',
    // borderBottomWidth: 1 / PixelRatio.get(),
    // borderBottomColor: '#ebebeb',
    width: '100%',
    height: 60,
  },
  labelBox: {
    flexDirection: 'row',
    alignItems: 'center',
    width: px2dp(200)
  },
  longTimeBox: {
    flexDirection: 'row',
    marginRight: px2dp(40)
  },
  longTime: {
    color: '#b2b2b2',
    marginLeft: px2dp(16)
  },

});
